<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commons/global.jsp" %>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/commons/basejs.jsp" %>
<meta http-equiv="X-UA-Compatible" content="edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户管理</title>
    <script type="text/javascript">
    var dataGrid;
    var url;
    $(function() {
        dataGrid = $('#dataGrid').datagrid({
            url : '${path}/user/queryByList.do',
            fit : true,
            striped : true,
            rownumbers : true,
            pagination : true,
            singleSelect : true,
            //selectOnCheck:false,
            idField : 'id',
            sortName : 'create_time',
            sortOrder : 'desc',
            pageSize : 10,
            pageList : [ 10, 20, 30, 40],
            loadMsg:'玩命加载中...',
            columns : [ [ 
			{
			    width : '80',
			    title : 'id',
			    field : 'id',
			    hidden	:true
			    //checkbox:true
			},{
                width : '80',
                title : '用户ID',
                field : 'user_id',
                sortable : true
            }, {
                width : '80',
                title : '用户名称',
                field : 'user_name',
                sortable : true
            },{
                width : '80',
                title : '昵称',
                field : 'nick_name',
            }, {
                width : '80',
                title : '角色',
                field : 'roles_name',
                sortable : true
            },{
                width : '80',
                title : '状态',
                field : 'status',
                formatter:function(value, row, index){
                	switch (value) {
                    case '0':
                        return '正常';
                    case '1':
                        return '冻结';
                    }
                },
              	styler:function(value,row,index){
              		switch (value) {
                    case '0':
                        return 'color:green;';
                    case '1':
                        return 'color:red;';
                    }
              	}
            },{
                width : '150',
                title : '创建时间',
                field : 'create_time',
                sortable : true
            }, {
                width : '150',
                title : '修改时间',
                field : 'update_time',
                sortable : true
            },{
                field : 'action',
                title : '操作',
                width : 60,
                formatter : function(value, row, index) {
                	var str='';
                    switch (row.status) {
                    case '0':
                    	return  $.formatString('<a href="javascript:void(0)" style="color:green" onclick="updateUserStatus(\'{0}\',1);" >冻结</a>', row.user_id);
                    case '1':
                    	return $.formatString('<a href="javascript:void(0)" style="color:red" onclick="updateUserStatus(\'{0}\',0);" >解冻</a>', row.user_id);
                    }
                }
            }
            ]],
            toolbar : '#toolbar'
        });
      	//加载角色
      	var roleUrl='${base}/role/queryByList.do?rows=100';
      	$.getJSON(roleUrl,function(json){
      		$('#role_name').combobox({
	      		data:json.rows,
    	  		valueField:'id',
    		    textField:'role_name',
    		    editable:false,
    		    panelHeight:'auto'
      		})
      	})
    });
    
    function searchFun() {
        dataGrid.datagrid('load', $.serializeObject($('#searchForm')));
    }
    
    function addFun() {
        $('#dlg_user').dialog('open').dialog('setTitle','新增');
        $('#fm_user').form('clear');
        url = '${base}/user/add.do';
    }
    
    function editFun(id) {
        var row = $('#dataGrid').datagrid('getSelected');
        if (row){
            $('#dlg_user').dialog('open').dialog('setTitle','编辑');
            $('#fm_user').form('load',row);
            url = '${base}/user/update.do?id='+row.id;
            $("#role_name").combobox('setValue',row.roles_id);
        }
    }
    
    function saveUser(){
    	if($('#fm_user').form('validate')){
    		$.post(url, $('#fm_user').serialize(), function (data) {
    			var result=eval("("+data+")");
                if (result.code!='0') {
                	$.messager.show({
                        title: 'Error',
                        msg: result.errorMsg
                    });
                }else {
                	$('#dlg_user').dialog('close');        // close the dialog
                    $('#dataGrid').datagrid('reload');    // reload the user data
                }                   
            });
    	}
    }
    
    function deleteFun() {
        var row = $('#dataGrid').datagrid('getSelected');
        if (row){
            $.messager.confirm('Confirm','删除可能会引起数据错乱,确定要删除吗?',function(r){
                if (r){
                    $.post('${base}/user/delete.do',{id:row.user_id},function(result){
                        if (result.code=="0"){
                            $('#dataGrid').datagrid('reload');    // reload the user data
                        } else {
                            $.messager.show({    // show error message
                                title: 'Error',
                                msg: result.errorMsg
                            });
                        }
                    },'json');
                }
            });
        }
        
    }
    //修改用户状态
    function updateUserStatus(userId,status){
    	var msg='';
    	if(status==0){
    		msg='是否解除冻结?';
    	}
    	if(status==1){
    		msg='是否冻结?'
    	}
    	$.messager.confirm('提示',msg,function(r){
    		if(r){
    	    	$.ajax({
    	    		type:'post',
    	    		url:'${base}/user/updateUserStatus.do',
    	    		dataType:'json',
    	    		data:{user_id:userId,status:status},
    	    		success:function(data){
    	    			if(data.code=='0'){
    	    				$('#dataGrid').datagrid('reload');
    	    			}else{
    	    				$.messager.show({    // show error message
    	                        title: 'Error',
    	                        msg: result.errorMsg
    	                    });
    	    			}
    	    		},
    	    		error:function(){
    	    			$.messager.alert('Error','系统异常');
    	    		}
    	    		
    	    	});
    		}
    	})
    }
    </script>

</head>
<body class="easyui-layout" data-options="fit:true,border:false">
    <div data-options="region:'north',border:false" style="height: 45px; overflow: hidden;background-color: #fff">
    	<form id="searchForm">
    	<div style="margin-top: 10px;margin-bottom: 10px; margin-left: 10px;">  
          <label>用户ID:</label>  
          <input name="user_id" class ="easyui-textbox" />  
          <label>用户名:</label>  
          <input name="user_name" class="easyui-textbox" />   
           <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search'" 
           	onclick="searchFun();">Search</a>  
       </div>
       </form>
    </div>
    <div data-options="region:'center',border:false" >
        <table id="dataGrid" data-options="fit:true,border:false"></table>
    </div>
    <div id="toolbar" style="display: none;">
    	<c:if test="${fn:contains(roleAuth,'/user/add.do')}">
    	<a onclick="addFun();" href="javascript:void(0);" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'">添加</a>
    	</c:if>
    	<c:if test="${fn:contains(roleAuth,'/user/update.do')}">
    	<a onclick="editFun();" href="javascript:void(0);" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-edit'">编辑</a>
    	</c:if>
    	<c:if test="${fn:contains(roleAuth,'/user/delete.do')}">
    	<a onclick="deleteFun();" href="javascript:void(0);" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'">删除</a>
    	</c:if>
    </div>
    <!-- 弹窗 -->
    <div id="dlg_user" class="easyui-dialog"  style="padding:10px 20px;width: 400px;height: 280px;"
            closed="true" buttons="#dlg-buttons_user">
        <div class="ftitle">详细信息</div>
        <form id="fm_user" method="post" novalidate>
        	<div class="fitem" style="display: none">
                <label>用户id:</label>
                <input name="user_id" class="easyui-textbox" readonly="readonly">
            </div>
            <div class="fitem">
                <label>用户名:</label>
                <input name="user_name" class="easyui-textbox" required="true">
            </div>
            <div class="fitem">
                <label>昵称:</label>
                <input name="nick_name" class="easyui-textbox" required="true">
            </div>
            <div class="fitem">
                <label>角色:</label>
                <input id="role_name" value="" name="roles_id" required="true">
            </div>
            <div class="fitem">
                <label>状态:</label>
                <select id="status" name="status" class="easyui-combobox" required="true" panelHeight="auto" style="width: 82px">
                	<option value="0">正常</option>
                	<option value="1">冻结</option>
                </select>
            </div>
        </form>
    </div>
    <div id="dlg-buttons_user">
        <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()" style="width:90px">保存</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg_user').dialog('close')" style="width:90px">取消</a>
    </div>
</html>